<template>
  <div id="contentPage" class="view flex">
    <div class="sec_left">
      <nav-left></nav-left>
      <my-charts></my-charts>
    </div>
    <div class="sec_right">
      <div class="sec1">
        <section1></section1>
      </div>
      <div class="sec2 flex">
        <div class="item_left">
          <sec2-left></sec2-left>
        </div>
        <div class="item_right">
          <sec2-right></sec2-right>
        </div>
      </div>
      <div class="sec3 flex">
        <div class="left">
          <my-news></my-news>
        </div>
        <div class="right">
          <sec3Right></sec3Right>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import header from './header.vue'
  import nav from './nav.vue'
  import navLeft from './navLeft.vue'
  import section1 from './middle/section1.vue'
  import sec2Left from './middle/sec2Left.vue'
  import sec2Right from './middle/sec2Right.vue'
  import footer from './footer.vue'
  import charts from './middle/charts.vue'
  import news from '../news/compoment'
  import message from './middle/message.vue'
  import sec3Right from './middle/sec3Right.vue'

  export default {
    data () {
      return {}
    },
    methods: {},
    components: {
      'my-header': header,
      'my-nav': nav,
      'nav-left': navLeft,
      'section1': section1,
      'sec2-left': sec2Left,
      'sec2-right': sec2Right,
      'my-footer': footer,
      'my-charts': charts,
      'my-news': news,
      'my-message': message,
      'sec3Right': sec3Right
    }

  }
</script>

<style lang="less" scoped>
  #contentPage {
    .sec_left {
      width: 230px;
      /*border-left: 1px solid #ccc;*/
      /*border-right: 1px solid #ccc;*/
    }
    .sec_right {
      flex: 1;
      width: 230px;
      .sec1 {
        padding: 8px 0 8px 6px;
      }
      .sec2 {
        padding: 8px 0 8px 6px;
        .item_left {
          flex: 1;
          height: 270px;
          border: 1px solid #ccc;
        }
        .item_right {
          width: 230px;
          height: 270px;
          overflow: auto;
          border: 1px solid #ccc;
          margin-left: 12px;
          text-align: left;
          padding:7px;
        }
      }
      .sec3{
        padding: 8px 0 8px 6px;
        .left{
          flex: 1;
          height: 400px;
          border: 1px solid #ccc;
        }
        .right{
          width: 230px;
          height: 400px;
          border: 1px solid #ccc;
          margin-left: 12px;
          padding:7px;
        }
      }
    }
  }
</style>
